<template>
  <!-- 资料展示左侧搜素 -->
  <div class="left-search">
    <div class="top">资料目录</div>
    <div class="center">
      <!-- 搜索 -->
      <div class="search_box">
        <el-input
          placeholder="请输入关键词"
          v-model="inputVal"
          prefix-icon="el-icon-search"
          size="mini"
          maxlength="100"
        >
        </el-input>
        <el-button type="primary" size="mini" @click="handleIconClick"
          >搜索</el-button
        >
      </div>
      <!-- 列表 -->
      <div
        class="data-list"
        v-loading="dataLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.5)"
      >
        <div
          v-infinite-scroll="loadData"
          :infinite-scroll-immediate="false"
          :infinite-scroll-disabled="disabled"
        >
          <div
            v-for="(item, index) in dataList"
            :key="index"
            @click="setActiveId(item)"
            :title="item.fileName"
            :class="item.id === activeId ? 'active' : 'activeh'"
          >
            {{ item.fileName }}
          </div>
        </div>
        <p v-if="noMore">
          {{ dataParams.pageNum === 1 && !clickSearchFlag ? "" : "没有更多了" }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "search",
  components: {},
  props: {
    getSelectItem: {
      type: Function,
    },
  },
  data() {
    return {
      inputVal: "",
      activeId: "",
      clickSearchFlag: false,
    };
  },
  created() {
    const dataParams = this.dataParams;
    dataParams.pageNum = 1;
    dataParams.name = this.inputVal;
    this.getDataAll({ params: dataParams });
    // // 热门
    // const dataParamsR = this.dataParamsR;
    // dataParams.name = this.inputVal;
    // this.getDataAllR({ params: dataParamsR });
  },
  computed: {
    ...mapState({
      dataList: (state) => state.qbShow.dataList,
      dataParams: (state) => state.qbShow.dataParams,
      dataParamsR: (state) => state.qbShow.dataParamsR,
      dataLoading: (state) => state.qbShow.dataLoading,
    }),
    noMore() {
      return this.dataList.length >= this.dataParams.total;
    },
    disabled() {
      return this.dataLoading || this.noMore;
    },
  },
  watch: {
    // 初次加载 显示第一个
    dataList(newValue) {
      this.setActiveId(newValue[0]);
    },
  },
  methods: {
    // 模糊查询
    handleIconClick(e) {
      e.preventDefault();
      // 列表
      this.clickSearchFlag = this.inputVal.length > 0;
      const dataParams = this.dataParams;
      dataParams.pageNum = 1;
      dataParams.name = this.inputVal;
      this.getDataAll({ params: dataParams });
      // 热门
      const dataParamsR = this.dataParamsR;
      dataParams.name = this.inputVal;
      this.getDataAllR({ params: dataParamsR });
    },
    // 滚动查询
    loadData() {
      const dataParams = this.dataParams;
      dataParams.pageNum += 1;
      this.getDataAll({ params: dataParams });
    },
    // 查询资料目录
    getDataAll({ params }) {
      this.$store.dispatch("qbShow/getDataAll", { params });
    },
    // 查询资料目录R
    getDataAllR({ params }) {
      this.$store.dispatch("qbShow/getDataAllR", { params });
    },
    // 选中后展示详情
    // setActiveId(item) {
    //   this.activeId = item.id;
    //   // 浏览量
    //   this.$store.dispatch("qbShow/updateById", {
    //     params: {
    //       connectionType: item.connectionType,
    //       id: item.id,
    //       viewNumber: 1,
    //     },
    //   });
    //   this.getSelectItem(item);
    // },
    // 改为显示资料详情
    setActiveId(item) {
      this.activeId = item.id;
      // 浏览量
      this.$store.dispatch("qbShow/findByIdDoc", {
        params: {
          // connectionType: item.connectionType,
          id: item.id,
          // viewNumber: 1,
        },
      });
      this.getSelectItem(item);
    },
  },
};
</script>

<style lang="scss">
//  左侧侧边栏
.left-search {
  .top {
    padding: 0.1rem 0.1rem 0.1rem 0;
    color: #2a9dff;
    font-weight: 700;
    border-bottom: 1px solid rgba(119, 109, 253, 0.5);
    margin-bottom: 0.1rem;
    font-size: 0.2rem;
  }
  .center {
    height: auto;
    // 搜索
    .search_box {
      margin: 0.1rem 0;
      display: flex;
      .el-input {
        margin-right: 0.06rem;
      }
      .el-input--mini .el-input__inner {
        color: #cccccc;
        background-color: #034576;
        border: 0px;
      }
    }
    .data-list {
      height: 72vh;
      overflow-y: auto;
      overflow-x: hidden;
      font-size: 0.18rem;
      padding-left: 0.05rem;
      div {
        color: #cccccc;
        cursor: pointer;
        margin: 0.05rem 0;
      }
      div:hover {
        color: #2a9dff;
        cursor: pointer;
        margin: 0.05rem 0;
      }
      .activeh {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .active {
        color: #2a9dff;
        cursor: pointer;
        margin: 0.05rem 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      p {
        font-size: 0.16rem;
        color: #cccccc80;
        text-align: center;
      }
    }
  }
}
</style>
